<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

</head>
<body>
<div id="wrapper">
  <div class="header">
    <p>支付失败</p>
  </div>
  <div class="content">
    <div class="pic">
      <img src="https://pay.shop.10086.cn/paygw/resources/images/icon_err.png">
      <h4>{{text}}</h4>
    </div>
  </div>
  <section>

  </section>
</div>
</body>

<style>
  *{
    margin: 0;
    padding:0;
  }
  body,html{
    width:100%;
    height:100%;

  }
  ul,li{
    list-style: noe;
  }
  a{
    text-decoration: none;
    color:#fff;!important;
  }
  #wrapper{
    width:100%;
    height:100%;
    background:#F6F8F5;
    position: relative;
  }
  #wrapper .header{
    width:100%;
    height:.74rem;
    background: #999;
    position: relative;
  }
  #wrapper .header p{
    font-size:.28rem;
    text-align:  center;
    line-height: .74rem;
    color: #000;
  }
  /*内容*/
  #wrapper .content{
    width:100%;
    height:auto;


  }
  #wrapper .content .pic{
    height:5.3rem;
    width: 63%;
    margin:0 auto;
    height:auto;
    padding:.86rem 0 0.2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #wrapper .content .pic img{
    width:1.7rem;
    height:1.7rem;
  }
  #wrapper .content .pic h4{
    margin:.3rem 0;
    color:#6DDD22;
    text-align: center;
  }
  /*订单信息*/
  section{
    background:#fff;
  }
  section ul{}
  section ul li{
    height:.85rem;
    line-height: .85rem;
    padding-left: .3rem;
    font-size: .24rem;
  }
  section ul li:nth-of-type(1){
    border-bottom:1px solid #E6E6E6;
    box-shadow:0rem  .0064rem .034rem #EEEEEE;
  }
  /*脚部*/
  footer{
    position:absolute;
    bottom: .31rem;
    height:0.8rem;
    width:100%;

  }
  footer .footer{
    width:90%;
    height:100%;
    border-radius: 0.1rem;
    margin:0 auto;
    background: #0085d0;

  }
  footer .footer p{
    color: #fff;
    font-size:.3rem;
    width:100%;
    height:100%;
  }
  footer .footer p a{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  footer .footer:hover{
    background: #0085d0;

  }
</style>
<script>
  ;(function(designWidth, maxWidth) {
    var doc = document,
      win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      if (!maxWidth) {
        maxWidth = 540;
      };
      if (width > maxWidth) {
        width = maxWidth;
      }
      //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
      var rem = width * 100 / designWidth;
      //兼容UC开始
      rootStyle="html{font-size:"+rem+'px !important}';
      rootItem = document.getElementById('rootsize') || document.createElement("style");
      if(!document.getElementById('rootsize')){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id='rootsize';
      }
      if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
      }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
      }
      //兼容UC结束
      docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function() {
      clearTimeout(tid); //防止执行两次
      tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
      if (e.persisted) { // 浏览器后退的时候重新计算
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    }, false);

    if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px";
    } else {
      doc.addEventListener("DOMContentLoaded", function(e) {
        doc.body.style.fontSize = "16px";
      }, false);
    }
  })(640, 640);
</script>
</html>
